<template>
    <view class="container">
        <view class="header">
            <view class="list">
                <view class="left">
                    <view class="title">欢迎使用</view>
                    <view class="small-title">防伪查询小程序</view>
                </view>

                <view class="right" @click="ToBusiness" v-if="Object.getOwnPropertyNames(business).length > 0">
                    <!-- <uv-image
                        width="20"
                        height="20"    
                        src="https://cdn.uviewui.com/uview/album/1.jpg"
                        shape="circle"
                        mode="scaleToFill"
                    >
                    </uv-image> -->

                    <image :src="business.avatar_cdn" />
                    {{ business.nickname }}
                </view>

                <view class="right" @click="ToBusiness" v-else>
                    <image src="/static/images/user-circle.png" />
                    登录
                </view>
            </view>

            <view class="validate-input">
                <uv-input :placeholder="placeholderText" v-model="code">
                    <!-- #ifndef H5 -->
                    <template #suffix>
                        <uv-icon size="28" name="scan" @click="onScanCode"></uv-icon>
                    </template>
                    <!-- #endif -->
                </uv-input>
            </view>
        </view>

        <view class="validate">
            <uv-button :customStyle="validateBtn" :plain="true" text="开始验证" @click="onValidate"></uv-button>
        </view>
    </view>

    <!-- 消息提示 -->
    <uv-toast ref="NoticeRef"></uv-toast>
</template>

<script setup>
const { proxy } = getCurrentInstance();

// 该代码块不会在H5平台编译
// #ifndef H5
const placeholderText = ref('请输入防伪码或者扫防伪码');
// #endif

// 该代码块只会在H5平台编译
// #ifdef H5
const placeholderText = ref('请输入防伪码');
// #endif

// 防伪码
const code = ref('');

// 信息提示组件实例对象
const NoticeRef = ref(null);

// 按钮样式
const validateBtn = ref({
    width: '100%',
    height: '100%',
    background: 'transparent',
    color: '#fff'
});

// 登录信息
const business = proxy.$business;

// 跳转我的页面
const ToBusiness = () =>
{
    uni.navigateTo({
        url: '/pages/business/index'
    });
}

// 验证防伪码
const onValidate = () =>
{
    if(business.value.hasOwnProperty('id') === false)
    {
        NoticeRef.value.show({
            type:'error',
            message:'请先登录'
        });

        return false;
    }

    // 去除两端的空格
    code.value = uni.$uv.trim(code.value);

    if (!code.value)
    {
        NoticeRef.value.show({
            type:'error',
            message:'请输入防伪码'
        });

        return false;
    }

    uni.$uv.route('/pages/validate/info',{code:code.value});
}

// #ifndef H5
const onScanCode = () =>
{
    if(business.value.hasOwnProperty('id') === false)
    {
        NoticeRef.value.show({
            type:'error',
            message:'请先登录'
        });

        return false;
    }

    // uniapp提供扫码API
    uni.scanCode({
        scanType:['qrCode'],
        success:(res) =>
        {
            const path = res.path ?? '';

            if(!path)
            {
                NoticeRef.value.show({
                    type:'error',
                    message:'获取防伪码失败'
                });

                return false;
            }

            uni.$uv.route(path);
        }
    })
}
// #endif
</script>

<style>
.header {
    height: 90vw;
    background: linear-gradient(to right, #33ccff 0%, #91cbf8 100%);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-top: 10vh;
}

.header .list {
    color: #fff;
    display: flex;
    justify-content: space-between;
}

.header .list .left {
    margin-left: 20px;
}

.header .list .left .title {
    margin-bottom: 10px;
}

.header .list .right {
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 0 5px 0 10px;
    color: #469eff;
    font-size: 12px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    height: 35px;
}

.header .list .right image {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    border-radius: 50%;
    object-fit: cover;
}

.header .validate-input {
    width: 80%;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 20vw;
}

.validate {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    background: #2879fc;
    margin: 0 auto;
    margin-top: -50px;
    box-shadow: 0px 0px 10px 10px #eee;
}

:deep(.uv-button-wrapper) {
    height: 100%;
}
</style>